<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="sepBread">
      <el-breadcrumb-item :to="{ path: '/OrderManagement' }"
        >客户管理
      </el-breadcrumb-item>
      <el-breadcrumb-item
        >{{ pageId ? "修改用户" : "添加用户" }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form
      ref="formRef"
      :model="addForm"
      label-width="100px"
      size="small"
      label-position="top"
      :rules="rules"
    >
      <el-row>
        <el-col :span="10">
          <div class="grid-content">
            <el-form-item label="联系人:" prop="username">
              <el-input v-model="addForm.username"> </el-input
            ></el-form-item>
            <el-form-item label="联系电话:" prop="phoneNum">
              <el-input v-model="addForm.phoneNum"></el-input
            ></el-form-item>
            <el-form-item label="身份证号:" prop="idcar">
              <el-input v-model="addForm.idcar"></el-input
            ></el-form-item>
            <el-form-item label="被保险人:" prop="theInsured">
              <el-input v-model="addForm.theInsured"></el-input
            ></el-form-item>
            <el-form-item label="保险公司:" prop="insuranceCompanyId">
              <el-select v-model="value" @change="fun1">
                <el-option
                  :label="item.companyName"
                  :value="item.id"
                  v-for="item in companyList"
                  :key="'company' + item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content">
            <el-form-item label="车牌号:" prop="carNum">
              <el-input v-model="addForm.carNum"></el-input>
            </el-form-item>
            <el-form-item label="车型:" prop="vehicleModel">
              <el-select v-model="addForm.vehicleModel">
                <el-option
                  :label="item.namae"
                  :value="item.name"
                  v-for="item in cartypeList"
                  :key="'cartype' + item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投保日期:" prop="insuredDate">
              <div class="block">
                <el-date-picker
                  v-model="addForm.insuredDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  :picker-options="dateOptions"
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item label="备注:">
              <el-input
                type="textarea"
                v-model="addForm.description"
                maxlength="21"
                show-word-limit
                rows="4"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <el-button
            type="primary"
            size="medium"
            class="btnposition"
            @click="save"
            >保存</el-button
          >
        </el-col>

        <el-col :span="4">
          <el-button size="medium" class="btnposition" @click="cancel"
            >取消</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "adduser",
  data() {
    return {
      value: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      addForm: {
        carNum: "",
        description: "",
        id: "", //511526199803122726
        idcar: "",
        insuranceCompanyId: "",
        insuredDate: "",
        lastLoginInt: new Date(),
        phoneNum: "", //13709087622
        status: 0,
        theInsured: "",
        username: "",
        vehicleModel: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          { min: 2, message: "长度至少2个字符", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: "必须是汉字",
            trigger: "blur",
          },
        ],
        phoneNum: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: "请输入正确的手机号",
          },
        ],
        id: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请输入正确的身份证号",
          },
          // { validator: validateId, trigger: 'blur' }
        ],
        theInsured: [
          { required: true, message: "请输入被保险人", trigger: "change" },
        ],
        insuranceCompanyId: [
          { required: true, message: "请选择保险公司", trigger: "blur" },
        ],
        idcar: [{ required: true, message: "请输入车牌号", trigger: "blur" }],

        vehicleModel: [
          { required: true, message: "请输入车型", trigger: "blur" },
        ],
        carNum: [
          { required: true, message: "请输入发动机号", trigger: "blur" },
        ],
        insuredDate: [
          {
            required: true,
            message: "请选择投保日期",
            trigger: "blur",
          },
        ],
      },
      pageId: "",
      companyList: [],
      cartypeList: [],
      dateOptions: {
        disabledDate(time) {
          return time.getTime() < new Date().getTime();
        },
      },
    };
  },
  methods: {
    addList() {
      //  console.log(this.username)
    },
    fun1() {
      this.addForm.insuranceCompanyId = this.value;
      console.log(this.addForm.insuranceCompanyId);
    },
    save() {
      this.$refs["formRef"].validate((valide) => {
        if (valide) {
          if (!this.pageId) {
            this.addSave();
          } else {
            this.updateSave();
          }
        }
      });
    },
    //新增保存
    addSave() {
      let params = this.addForm;
      this.$axios({
        url: "/userManagement/add",
        method: "post",
        data: params,
      }).then((res) => {
         if (res.data.code == 0) {
          this.$router.push("/home/usermanagement");
          this.$message({
            showClose: true,
            message: "修改成功",
          });
        }
        this.reset();
      });
    },
    //清空或重置
    reset() {
      this.$refs["formRef"].resetField();
    },
    //修改保存
    updateSave() {
      let params = this.addForm;
      this.$axios({
        url: "/userManagement/update",
        method: "post",
        data: params,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.$router.push("/home/usermanagement");
          this.$message({
            showClose: true,
            message: "保存成功",
          });
        }
      });
    },
    cancel() {
      this.$router.push({
        path: "/usermanagement",
      });
    },
    //保险公司列表
    getInsuranceList() {
      this.$axios({
        url: "/insuranceCompanyManagement/list",
        method: "post",
        data: {},
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 0) {
          console.log(res.data.data);
          this.companyList = res.data.data;
        }
      });
    },
    //汽车品牌
    geyCarbrand() {
      this.$axios({
        url: "/carBrand/list",
        method: "post",
        data: {},
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 0) {
          this.cartypeList = res.data.data;
        }
      });
    },
    //查询修改信息
    getDetail() {
      let rowId = this.$route.query.id || "";
      if (rowId) {
        this.$axios({
          url: `/userManagement/find?id=${rowId}`,
        }).then((res) => {
          if (res.data.code == 0) {
            let detailData = res.data.data;
            // let detailData = {
            //   carNum: "asdjkas",
            //   id: "511526199803122726", //511526199803122726
            //   idcar: "dfgdf",
            //   insuranceCompanyId: "中国为",
            //   insuredDate: new Date(),
            //   lastLoginInt: new Date(),
            //   phoneNum: "13709087622", //13709087622
            //   status: 0,
            //   theInsured: "中国为",
            //   username: "修改用户",
            //   vehicleModel: "撒大苏打",
            // };
            for (let k in this.addForm) {
              this.addForm[k] = detailData[k] || "";
            }
            // this.addForm = {
            //   ...detailData,
            // };
          }
        });
      }
    },
  },
  mounted: function () {
    // this.$axios({
    //   url:'/userManagement/add',
    //   method:"post",
    // })
    // .then((res)=>{
    //   console.log(res+"12324332");
    // })
  },
  created() {
    this.pageId = this.$route.query.id || "";
    this.getInsuranceList();
    this.getDetail();
    this.geyCarbrand();
  },
};
</script>

<style scoped lang="less">
.sepBread {
  font-size: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: left;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-input {
  width: 300px;
}
.el-select {
  width: 300px;
}
small.el-form-item {
  margin-bottom: 18px;
  text-align: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-left: 300px;
  margin-top: 100px;
  text-align: left;
}
.siji {
  width: 100px;
}
.siji1 {
  width: 200px;
}
small.el-form-item {
  margin-bottom: 18px;
  text-align: left;
}
.el-form-item__label {
  text-align: left;
}
.btnposition {
  margin-left: 600px;
}
</style>